<template>
  <div id="app">
    <a-layout id="components-layout-demo-custom-trigger">
      <LeftSide></LeftSide>
      <a-layout style="overflow:hidden;">
        <a-layout-header style="background: #fff; padding: 0">
          <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="changeCollapsed"
          />
          <div style="display:flex;align-items:center;">
            <a-icon
              @click="isFullscreen=!isFullscreen"
              :type="isFullscreen?'fullscreen-exit':'fullscreen'"
              class="myicon"
            />
            <i @click="changeLocale" class="iconfont icon-zhongyingwen myicon"></i>

            <a-dropdown>
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                <a-icon type="user" />
                &nbsp;{{CURRENT_USER}}
                <a-icon type="down" />
              </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;">
                    <a-icon type="tool" />&nbsp;修改密码
                  </a>
                </a-menu-item>
                <a-menu-item>
                  <a @click="logout">
                    <a-icon type="poweroff" />&nbsp;注销登录
                  </a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </a-layout-header>
        <a-layout-content
          :style="{ margin: '10px 10px', padding: '10px', background: '#fff', minHeight: '470px' , overflow:'hidden' }"
        >
          <Bread></Bread>
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
import LeftSide from "@/components/LeftSide";
import Bread from "@/components/Bread";
import { mapState, mapMutations } from "vuex";

const columns = [
  {
    dataIndex: "name",
    key: "name",
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" },
  },
  {
    title: "Age",
    dataIndex: "age",
    key: "age",
  },
  {
    title: "Address",
    dataIndex: "address",
    key: "address",
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" },
  },
  {
    title: "Action",
    key: "action",
    scopedSlots: { customRender: "action" },
  },
];

export default {
  watch: {
    isFullscreen(val) {
      if (val) {
        let docElm = document.documentElement;
        //W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();
        }
        //IE11
        else if (docElm.msRequestFullscreen) {
          document.body.msRequestFullscreen();
        }
      } else {
        //W3C
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else {
          window.parent.showTopBottom();
        }
      }
    },
  },
  components: {
    Bread,
    LeftSide,
  },
  data() {
    return {
      isFullscreen: false,
      columns,
    };
  },
  computed: {
    CURRENT_USER() {
      return sessionStorage.getItem("login-user");
    },
    ...mapState(["collapsed"]),
  },
  methods: {
    logout() {
      this.$mc("确定退出？", () => {
        sessionStorage.removeItem("login-user");
        this.$router.push("/login");
      });
    },
    changeLocale() {
      this.$i18n.locale = this.$i18n.locale === "zh" ? "en" : "zh";
    },
    ...mapMutations(["changeCollapsed"]),
  },
};
</script>

<style>
@import url("https://at.alicdn.com/t/font_2007589_psyt2sxtas.css");

.myicon {
  cursor: pointer;
  margin: 0 20px 0 5px;
  font-size: 22px;
}
#components-layout-demo-custom-trigger {
  height: 100vh;
}
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

.ant-layout-header {
  display: flex;
  justify-content: space-between;
}

.ant-dropdown-link {
  margin-right: 30px;
}
</style>
